<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#adv {
				height: 280px;
				width: 1520px;
				border: 2px solid red;
				overflow: hidden; 
				position: relative;
				margin: 100px auto;
				background: url("1.jpg") 0 0 no-repeat, url("2.jpg") 530px 0 no-repeat, url("3.jpg") 1040px 0 no-repeat;
			}

			#adv #nav {
				position: absolute;
				right: 30px;
				bottom: 10px;
			}

			#adv #nav li {
				list-style: none;
				float: left;
				height: 10px;
				width: 10px;
				margin-left: 5px;
				
				background-color: white; 
				border-radius: 50%;
				cursor: pointer;
			}
			#adv #nav .current{
				background-color: red;
			}

			.clear:after {
				clear: both;
				content: '';
				display: block;
			}
		</style>
		<script>
			var timer;
			window.onload = function() {
				//timer=setInterval("g()", 1000);
			}
			var count = 1;
				
			function g() {
				//前一个恢复红色
				
				document.getElementById("nav").children[count-1].removeAttribute("class");
				
				var a = document.getElementById("guanggao");
				count++;
				if (count == 6)
					count = 1; 
					
				a.src = count + ".jpg";
				//添加样式
				document.getElementById("nav").children[count-1].className="current";
				
			}
			function stopAdv(){
				window.clearInterval(timer);
			}	
			function startAdv(){
				timer=setInterval("g()", 1000);
			}
		</script>
	</head>
	<body>
		<div id="adv" class="clear" >
			<!-- <a href="#">
				<img src="1.jpg" id="guanggao"/>
			</a> -->
			<ul id="nav">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
